<template>
  <div class='page grey-stage redpack-tixian'>
      <div class="container overscroll-y-auto" :style="containerHeight">
        <div class="redpack-tixian-body">
          <div class="flow-detail">
            <p>手机号: {{ user.mobile }}</p>
            <p>
              <div>提现金额:</div>
              <div>
                <input v-model="tixianBalance" class="tixian-balance" />
              </div>
            </p>
            <p>红包余额{{ redpackBalance | moneyFormate }}</p>
            <p>
              <span v-if="redpackBalance > 100"  class="btn scrm-default-btn" @click="$tixian">确认提现</span>
              <span class="disabled-btn" v-if="redpackBalance < 100">确认提现</span>
            </p>
          </div>
        </div>
        <x-dialog v-model="this.$store.state.app.dialogShow">
          <div class="dialog-message">
            {{ this.$store.state.app.dialogMessage }}
          </div>
          <span class="vux-close" @click="hideDialog">知道了</span>
        </x-dialog>
      </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='mine'></crm-tabbar>
  </div>

</template>
<script>
// import Vue from 'vue'
import XDialog from 'vux/src/components/x-dialog'
import crmTabbar from '../components/crm-tabbar'
import salesTarget from '../components/sales-target'
import salesPerformance from '../components/sales-performance'
import salesExecutive from '../components/sales-executive'
import topFilter from '../components/top-filter'
import crmCover from '../components/crm-cover'
// import {Cell, Group} from 'vux'
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'
import {showDialog, hideDialog} from '../lib/dialog'
// import Scroller from 'vue-scroller'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    crmTabbar,
    salesTarget,
    salesPerformance,
    salesExecutive,
    topFilter,
    crmCover,
    Cell,
    Group,
    XDialog
    // Scroller
  },
  destroyed () {
    hideDialog()
  },
  methods: {
    hideDialog () {
      if (this.succesed) {
        this.$router.back()
      }
      hideDialog()
    },
    $tixian () {
      if (!this.tixianBalance) {
        return showDialog('提现金额不能为空!')
      }

      if (this.tixianBalance > this.redpackBalance) {
        return showDialog('提现金额不能超过红包余额!')
      }

      if (this.lock) return
      this.lock = true
      this.originMoney = this.tixianBalance
      const tixianBalance = this.tixianBalance
      this.redpackBalance = this.redpackBalance - this.tixianBalance

      this.$vux.loading.show({text: '提现中...'})
      this.tixian({tixian_money: tixianBalance}).then((response) => {
        this.lock = false
        this.$vux.loading.hide()
        if (response.data.errcode === 0) {
          this.succesed = true
          showDialog('提现成功！')
        } else {
          this.succesed = false
          this.tixianBalance = this.originMoney
          showDialog('提现失败！重试两次如果不行请联系管理员!')
        }
      }).catch((e) => {
        this.succesed = false
        this.lock = false
        this.tixianBalance = this.originMoney
        this.$vux.loading.hide()
        showDialog('提现失败！重试两次如果不行请联系管理员!')
      })
    },
    ...mapActions({
      getRedpackFlow: 'getRedpackFlow',
      getRedpackBalance: 'getRedpackBalance',
      tixian: 'tixian'
    })
  },
  computed: {
    isShowCover () {
      return this.$store.state.app.isShowCover
    },
    ...mapState({
      user: state => state.app.user
    })
  },
  mounted () {
    this.$vux.loading.show({text: '加载中'})
    this.getRedpackFlow().then((response) => {
      if (response.data.errcode === 0) {
        this.list = response.data.results
      }
      this.$vux.loading.hide()
    }).catch((e) => {
      this.$vux.loading.hide()
    })

    this.getRedpackBalance().then((response) => {
      if (response.data.errcode === 0) {
        this.redpackBalance = response.data.results.redpacket_balance
      }
    }).catch((e) => {
    })
    this.callJsApi('biz.navigation.setTitle', {title: '提现'})
  },
  data () {
    return {
      containerHeight: 'height:' + document.body.scrollHeight + 'px;',
      list: [],
      redpackBalance: 0,
      tixianBalance: null
    }
  }
}
</script>
<style lang="less">

@import "../less/base";

section{
  background-color: white;
}


.redpack-tixian {
  // text-`align: center;
  .flow-detail {
    padding: 20px 0 20px 10px;
    margin: 10px 10px;
    border-radius: 10px;
    background-color: #f1f1f1;
    font-size: 14px;

    p {
      margin: 10px 0;
    }
    // text-align: center;
  }

  .redpack-tixian-body {
    padding-top: 20px;
  }

  .description {
    text-align: center;
  }

  .disabled-btn {
    display: block;
    background-color: #ccc;
    color: white;
    text-align: center;
    margin: 0 auto;
    border-radius: 4px;
    padding: 6px 0;
    font-size: 14px;
    width: 80%;
    border: 1px solid #ccc;
  }


  .tixian-balance {
    display: block;
    width: 280px;
    margin: 10px 0;
    height: 28px;
  }

  .tixian {
    padding: 10px 0;
  }

  .grey-smaller {
    font-size: 12px;
    color: #999999;
  }

  .flow-avatar {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;

    img {
      display: inline-block;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: contain;
    }
  }
}
</style>
